<template>
  <view class="app-container">
    <image class="background" src="/static/images/background.png" mode="aspectFill"></image>
    <view :style="{ marginTop: titleMargin + 'px' }" class="title">完善信息</view>
    <view class="main-box">
      <swiper class="swiper" :current="index" :indicator-dots="false" :autoplay="false">
        <swiper-item @touchmove.stop="">
          <form @submit="submitStep">
            <view class="step-box">
              <view class="step-title">基本信息</view>

              <view class="row-box">
                <view class="row">
                  <view class="text">姓名</view>
                  <input type="text" name="username" class="input" placeholder="请输入姓名" :value="basic_info.username"/>
                </view>
                <view class="row">
                  <view class="text">性别</view>
                  <view class="sex-box">
                    <view @click="chooseGender('男')" :class="['sex', basic_info.gender == '男' ? 'active' : '']">男</view>
                    <view @click="chooseGender('女')" :class="['sex', basic_info.gender == '女' ? 'active' : '']">女</view>
                    <input type="text" name="gender" :value="basic_info.gender" style="display: none;"/>
                  </view>
                </view>
                <view class="row">
                  <view class="text">年份</view>
                  <picker class="res-box" mode="date" :value="basic_info.birth_date" @change="changeBirthDate">
                    <view class="row" style="min-width: 500rpx">
                      <view class="res">{{ basic_info.birth_year }}</view>
                      <image class="icon" src="/static/images/choose.png"></image>
                    </view>
                  </picker>

                  <input type="text" name="birth_date" :value="basic_info.birth_date" style="display: none"/>
                </view>
              </view>

              <input type="text" name="step" value="1" style="display: none">

              <view class="btn-box">
                <button plain form-type="submit" class="next-btn">继续<label>还剩3步</label></button>
                <view @click="skip" class="skip">直接跳过</view>
              </view>
            </view>
          </form>

        </swiper-item>
        <swiper-item @touchmove.stop="">
          <form @submit="submitStep">
            <view class="step-box">
              <view class="step-title">信息信息</view>
              <view class="row-box">
                <view class="row" @click="openPopup('residence')">
                  <view class="text">居住</view>
                  <view class="res-box">
                    <view class="res">{{ basic_info.residence }}</view>
                    <image class="icon" src="/static/images/choose.png"></image>
                  </view>
                  <input type="text" name="residence" :value="basic_info.residence" style="display: none">
                </view>
                <view class="row" @click="openPopup('height')">
                  <view class="text">身高</view>
                  <view class="res-box">
                    <view class="res">{{ basic_info.height ? basic_info.height + 'cm' : '' }}</view>
                    <image class="icon" src="/static/images/choose.png"></image>
                  </view>
                  <input type="text" name="height" :value="basic_info.height" style="display: none">
                </view>
                <view class="row" @click="openPopup('weight')">
                  <view class="text">体重</view>
                  <view class="res-box">
                    <view class="res">{{ basic_info.weight ? basic_info.weight + 'kg' : '' }}</view>
                    <image class="icon" src="/static/images/choose.png"></image>
                  </view>

                  <input type="text" name="weight" :value="basic_info.weight" style="display: none">
                </view>
              </view>

              <input type="text" name="step" value="2" style="display: none">

              <view class="btn-box">
                <button form-type="submit" class="next-btn">继续<label>还剩2步</label></button>
                <view @click="skip" class="skip">直接跳过</view>
              </view>
            </view>
          </form>
        </swiper-item>
        <swiper-item @touchmove.stop="">
          <form @submit="submitStep">
            <view class="step-box">
              <view class="step-title">详细信息</view>
              <view class="row-box">
                <view class="row" @click="openPopup('marital_status')">
                  <view class="text">婚姻状态</view>
                  <view class="res-box">
                    <view class="res">{{ detail_info.marital_status }}</view>
                    <image class="icon" src="/static/images/choose.png"></image>
                  </view>
                  <input type="text" name="marital_status" :value="detail_info.marital_status" style="display: none">
                </view>
                <view class="row" @click="openPopup('annual_income')">
                  <view class="text">年收入</view>
                  <view class="res-box">
                    <view class="res">{{ detail_info.annual_income }}</view>
                    <image class="icon" src="/static/images/choose.png"></image>
                  </view>
                  <input type="text" name="annual_income" :value="detail_info.annual_income" style="display: none">
                </view>
                <view class="row" @click="openPopup('housing_status')">
                  <view class="text">住房情况</view>
                  <view class="res-box">
                    <view class="res">{{ detail_info.housing_status }}</view>
                    <image class="icon" src="/static/images/choose.png"></image>
                  </view>
                  <input type="text" name="housing_status" :value="detail_info.housing_status" style="display: none">
                </view>
                <view class="row" @click="openPopup('car_status')">
                  <view class="text">车辆情况</view>
                  <view class="res-box">
                    <view class="res">{{ detail_info.car_status }}</view>
                    <image class="icon" src="/static/images/choose.png"></image>
                  </view>
                  <input type="text" name="car_status" :value="detail_info.car_status" style="display: none">
                </view>
              </view>

              <input type="text" name="step" value="3" style="display: none">

              <view class="btn-box">
                <button form-type="submit" class="next-btn">继续<label>还剩1步</label></button>
                <view @click="skip" class="skip">直接跳过</view>
              </view>
            </view>
          </form>
        </swiper-item>
        <swiper-item @touchmove.stop="">
          <form @submit="submitStep">
            <view class="step-box">
              <view class="step-title">择偶要求</view>
              <view class="row-box">
                <view class="row" @click="openPopup('requirement_age')">
                  <view class="text">年龄范围</view>
                  <view class="res-box">
                    <view class="res">{{ requirement_info.requirement_age }}</view>
                    <image class="icon" src="/static/images/choose.png"></image>
                  </view>
                  <input type="text" name="requirement_age" :value="requirement_info.requirement_age" style="display: none">
                </view>
                <view class="row" @click="openPopup('requirement_height')">
                  <view class="text">身高范围</view>
                  <view class="res-box">
                    <view class="res">{{ requirement_info.requirement_height }}</view>
                    <image class="icon" src="/static/images/choose.png"></image>
                  </view>
                  <input type="text" name="requirement_height" :value="requirement_info.requirement_height" style="display: none">
                </view>
                <view class="row" @click="openPopup('requirement_marital_status')">
                  <view class="text">婚姻状况</view>
                  <view class="res-box">
                    <view class="res">{{ requirement_info.requirement_marital_status }}</view>
                    <image class="icon" src="/static/images/choose.png"></image>
                  </view>
                  <input type="text" name="requirement_marital_status" :value="requirement_info.requirement_marital_status" style="display: none">
                </view>
                <view class="row" @click="openPopup('requirement_buying_status')">
                  <view class="text">购房要求</view>
                  <view class="res-box">
                    <view class="res">{{ requirement_info.requirement_buying_status ? requirement_info.requirement_buying_status : '不限' }}</view>
                    <image class="icon" src="/static/images/choose.png"></image>
                  </view>
                  <input type="text" name="requirement_buying_status" :value="requirement_info.requirement_buying_status" style="display: none">
                </view>
                <view class="row" @click="openPopup('requirement_car_status')">
                  <view class="text">购车要求</view>
                  <view class="res-box">
                    <view class="res">{{ requirement_info.requirement_car_status ? requirement_info.requirement_car_status : '不限' }}</view>
                    <image class="icon" src="/static/images/choose.png"></image>
                  </view>
                  <input type="text" name="requirement_car_status" :value="requirement_info.requirement_car_status" style="display: none">
                </view>
                <view class="row" @click="openPopup('requirement_has_children')">
                  <view class="text">子女要求</view>
                  <view class="res-box">
                    <view class="res">{{ requirement_info.requirement_has_children ? requirement_info.requirement_has_children : '不限' }}</view>
                    <image class="icon" src="/static/images/choose.png"></image>
                  </view>
                  <input type="text" name="requirement_has_children" :value="requirement_info.requirement_has_children" style="display: none">
                </view>
              </view>

              <input type="text" name="step" value="4" style="display: none">

              <view class="btn-box">
                <button form-type="submit" class="next-btn">完成<label></label></button>
                <view @click="skip" class="skip">直接跳过</view>
              </view>
            </view>
          </form>
        </swiper-item>
      </swiper>
    </view>

    <!-- 基本信息、详细信息、择偶要求 弹框 START -->
    <view v-if="infoModal" class="modal-overlay" @click="closeInfoModal">
      <view class="modal" @click.stop>
        <view class="modal-content">
          <!-- 基本信息修改弹框 -->
          <view class="close" @click="closeInfoModal">关闭</view>
          <view class="modal-title">基本信息</view>
          <view class="row-box">
            <view class="row">
              <view class="text">姓名</view>
              <input type="text" class="input" placeholder="请输入姓名" @input="changeUsername" :value="basic_info.username"/>
            </view>
            <view class="row">
              <view class="text">年份</view>
              <picker class="res-box" mode="date" :value="basic_info.birth_date" @change="changeBirthDate">
                <view class="row" style="min-width: 500rpx">
                  <view class="res">{{ basic_info.birth_year }}</view>
                  <image class="icon" src="/static/images/choose.png"></image>
                </view>
              </picker>
            </view>
            <view class="row" @click="openPopup('residence')">
              <view class="text">居住</view>
              <view class="res-box">
                <view class="res">{{ basic_info.residence }}</view>
                <image class="icon" src="/static/images/choose.png"></image>
              </view>
            </view>
            <view class="row" @click="openPopup('hukou')">
              <view class="text">户籍</view>
              <view class="res-box">
                <view class="res">{{ basic_info.hukou }}</view>
                <image class="icon" src="/static/images/choose.png"></image>
              </view>
            </view>
            <view class="row" @click="openPopup('height')">
              <view class="text">身高</view>
              <view class="res-box">
                <view class="res">{{ basic_info.height ? basic_info.height + 'cm' : '' }}</view>
                <image class="icon" src="/static/images/choose.png"></image>
              </view>
            </view>
            <view class="row" @click="openPopup('weight')">
              <view class="text">体重</view>
              <view class="res-box">
                <view class="res">{{ basic_info.weight ? basic_info.weight + 'kg' : '' }}</view>
                <image class="icon" src="/static/images/choose.png"></image>
              </view>
            </view>
          </view>
          <!-- 详细信息修改弹框 -->
          <view class="modal-title">详细信息</view>
          <view class="row-box">
            <view class="row" @click="openPopup('marital_status')">
              <view class="text">婚况</view>
              <view class="res-box">
                <view class="res">{{ detail_info.marital_status }}</view>
                <image class="icon" src="/static/images/choose.png"></image>
              </view>
            </view>
            <view class="row" @click="openPopup('annual_income')">
              <view class="text">年收入</view>
              <view class="res-box">
                <view class="res">{{ detail_info.annual_income }}</view>
                <image class="icon" src="/static/images/choose.png"></image>
              </view>
            </view>
            <view class="row" @click="openPopup('has_children')">
              <view class="text">小孩</view>
              <view class="res-box">
                <view class="res">{{ detail_info.has_children }}</view>
                <image class="icon" src="/static/images/choose.png"></image>
              </view>
            </view>
            <view class="row" @click="openPopup('housing_status')">
              <view class="text">住房</view>
              <view class="res-box">
                <view class="res">{{ detail_info.housing_status }}</view>
                <image class="icon" src="/static/images/choose.png"></image>
              </view>
            </view>
            <view class="row" @click="openPopup('car_status')">
              <view class="text">车辆</view>
              <view class="res-box">
                <view class="res">{{ detail_info.car_status }}</view>
                <image class="icon" src="/static/images/choose.png"></image>
              </view>
            </view>
          </view>
          <!-- 择偶要求修改弹框 -->
          <view class="modal-title">择偶要求</view>
          <view class="row-box">
            <view class="row" @click="openPopup('requirement_age')">
              <view class="text">年龄范围</view>
              <view class="res-box">
                <view class="res">{{ requirement_info.requirement_age }}</view>
                <image class="icon" src="/static/images/choose.png"></image>
              </view>
            </view>
            <view class="row" @click="openPopup('requirement_height')">
              <view class="text">身高范围</view>
              <view class="res-box">
                <view class="res">{{ requirement_info.requirement_height }}</view>
                <image class="icon" src="/static/images/choose.png"></image>
              </view>
            </view>
            <view class="row" @click="openPopup('requirement_marital_status')">
              <view class="text">婚姻状况</view>
              <view class="res-box">
                <view class="res">{{ requirement_info.requirement_marital_status }}</view>
                <image class="icon" src="/static/images/choose.png"></image>
              </view>
            </view>
            <view class="row" @click="openPopup('requirement_buying_status')">
              <view class="text">购房</view>
              <view class="res-box">
                <view class="res">{{ requirement_info.requirement_buying_status ? requirement_info.requirement_buying_status : '不限' }}</view>
                <image class="icon" src="/static/images/choose.png"></image>
              </view>
            </view>
            <view class="row" @click="openPopup('requirement_car_status')">
              <view class="text">购车</view>
              <view class="res-box">
                <view class="res">{{ requirement_info.requirement_car_status ? requirement_info.requirement_car_status : '不限' }}</view>
                <image class="icon" src="/static/images/choose.png"></image>
              </view>
            </view>
            <view class="row" @click="openPopup('requirement_has_children')">
              <view class="text">小孩</view>
              <view class="res-box">
                <view class="res">{{ requirement_info.requirement_has_children ? requirement_info.requirement_car_status : '不限' }}</view>
                <image class="icon" src="/static/images/choose.png"></image>
              </view>
            </view>
          </view>
          <view class="bottom-view">
            <view class="save-btn" @click="saveUserDetails">保存</view>
          </view>
        </view>
      </view>
    </view>
    <!-- 基本信息、详细信息、择偶要求 弹框 END -->

    <!-- 基本信息、详细信息、择偶要求 修改弹框 START -->
    <view class="popup-overlay" :class="{ 'show': popup }" @click="closePopup">
      <view class="popup-content" @click.stop>
        <!-- 基本信息-居住 -->
        <block v-if="popupType === 'residence'">
          <view class="top-box">
            <view class="btn" @click="closePopup">取消</view>
            <view class="btn confirm-btn" @click="confirmChoose">确定</view>
          </view>
          <picker-view :immediate-change="true" :indicator-style="indicatorStyle" :value="residenceChooseValue" @change="bindChange" class="picker-view">
            <picker-view-column>
              <view class="item" v-for="(item,index) in region" :key="index">{{ item.name }}</view>
            </picker-view-column>
            <picker-view-column>
              <view class="item" v-for="(item,index) in region[residenceChooseValue[0]].city_list" :key="index">{{ item.name }}</view>
            </picker-view-column>
          </picker-view>
        </block>
        <!-- 基本信息-身高 -->
        <block v-if="popupType === 'height'">
          <view class="top-box">
            <view class="btn" @click="closePopup">取消</view>
            <view class="btn confirm-btn" @click="confirmChoose">确定</view>
          </view>
          <picker-view :immediate-change="true" :indicator-style="indicatorStyle" :value="heightChooseValue" @change="bindChange" class="picker-view">
            <picker-view-column>
              <view class="item" v-for="(item,index) in heightData" :key="index">{{ item }}cm</view>
            </picker-view-column>
          </picker-view>
        </block>
        <!-- 基本信息-体重 -->
        <block v-if="popupType === 'weight'">
          <view class="top-box">
            <view class="btn" @click="closePopup">取消</view>
            <view class="btn confirm-btn" @click="confirmChoose">确定</view>
          </view>
          <picker-view :immediate-change="true" :indicator-style="indicatorStyle" :value="weightChooseValue" @change="bindChange" class="picker-view">
            <picker-view-column>
              <view class="item" v-for="(item,index) in weightData" :key="index">{{ item }}kg</view>
            </picker-view-column>
          </picker-view>
        </block>
        <!-- 详细信息-婚况 -->
        <block v-if="popupType === 'marital_status'">
          <view class="top-box">
            <view class="btn" @click="closePopup">取消</view>
            <view class="btn confirm-btn" @click="confirmChoose">确定</view>
          </view>
          <picker-view :immediate-change="true" :indicator-style="indicatorStyle" :value="maritalStatusChooseValue" @change="bindChange" class="picker-view">
            <picker-view-column>
              <view class="item" v-for="(item,index) in maritalStatusData" :key="index">{{ item }}</view>
            </picker-view-column>
          </picker-view>
        </block>
        <!-- 详细信息-年收入 -->
        <block v-if="popupType === 'annual_income'">
          <view class="top-box">
            <view class="btn" @click="closePopup">取消</view>
            <view class="btn confirm-btn" @click="confirmChoose">确定</view>
          </view>
          <picker-view :immediate-change="true" :indicator-style="indicatorStyle" :value="annualIncomeChooseValue" @change="bindChange" class="picker-view">
            <picker-view-column>
              <view class="item" v-for="(item,index) in annualIncomeData" :key="index">{{ item }}</view>
            </picker-view-column>
          </picker-view>
        </block>
        <!-- 详细信息-小孩 -->
        <block v-if="popupType === 'has_children'">
          <view class="top-box">
            <view class="btn" @click="closePopup">取消</view>
            <view class="btn confirm-btn" @click="confirmChoose">确定</view>
          </view>
          <picker-view :immediate-change="true" :indicator-style="indicatorStyle" :value="hasChildrenChooseValue" @change="bindChange" class="picker-view">
            <picker-view-column>
              <view class="item" v-for="(item,index) in hasChildrenData" :key="index">{{ item }}</view>
            </picker-view-column>
          </picker-view>
        </block>
        <!-- 详细信息-住房 -->
        <block v-if="popupType === 'housing_status'">
          <view class="top-box">
            <view class="btn" @click="closePopup">取消</view>
            <view class="btn confirm-btn" @click="confirmChoose">确定</view>
          </view>
          <picker-view :immediate-change="true" :indicator-style="indicatorStyle" :value="housingStatusChooseValue" @change="bindChange" class="picker-view">
            <picker-view-column>
              <view class="item" v-for="(item,index) in housingStatusData" :key="index">{{ item }}</view>
            </picker-view-column>
          </picker-view>
        </block>
        <!-- 详细信息-车辆 -->
        <block v-if="popupType === 'car_status'">
          <view class="top-box">
            <view class="btn" @click="closePopup">取消</view>
            <view class="btn confirm-btn" @click="confirmChoose">确定</view>
          </view>
          <picker-view :immediate-change="true" :indicator-style="indicatorStyle" :value="carStatusChooseValue" @change="bindChange" class="picker-view">
            <picker-view-column>
              <view class="item" v-for="(item,index) in carStatusData" :key="index">{{ item }}</view>
            </picker-view-column>
          </picker-view>
        </block>
        <!-- 择偶要求-年龄范围 -->
        <block v-if="popupType === 'requirement_age'">
          <view class="top-box">
            <view class="btn" @click="closePopup">取消</view>
            <view class="btn confirm-btn" @click="confirmChoose">确定</view>
          </view>
          <picker-view :immediate-change="true" :indicator-style="indicatorStyle" :value="requirementAgeChooseValue" @change="bindChange" class="picker-view">
            <picker-view-column>
              <view class="item" v-for="(item,index) in ageData" :key="index">{{ item }}岁</view>
            </picker-view-column>
            <picker-view-column>
              <view class="item" v-for="(item,index) in ageData" :key="index">{{ item }}岁</view>
            </picker-view-column>
          </picker-view>
        </block>
        <!-- 择偶要求-身高范围 -->
        <block v-if="popupType === 'requirement_height'">
          <view class="top-box">
            <view class="btn" @click="closePopup">取消</view>
            <view class="btn confirm-btn" @click="confirmChoose">确定</view>
          </view>
          <picker-view :immediate-change="true" :indicator-style="indicatorStyle" :value="requirementHeightChooseValue" @change="bindChange" class="picker-view">
            <picker-view-column>
              <view class="item" v-for="(item,index) in heightData" :key="index">{{ item }}cm</view>
            </picker-view-column>
            <picker-view-column>
              <view class="item" v-for="(item,index) in heightData" :key="index">{{ item }}cm</view>
            </picker-view-column>
          </picker-view>
        </block>
        <!-- 择偶要求-婚况 -->
        <block v-if="popupType === 'requirement_marital_status'">
          <view class="top-box">
            <view class="btn" @click="closePopup">取消</view>
            <view class="btn confirm-btn" @click="confirmRequirementMaritalStatus">确定</view>
          </view>
          <view class="checkbox-box">
            <label class="checkbox-label" @click="changeRequirementMaritalStatus(item)" v-for="(item,index) in maritalStatusData" :key="index">
              <checkbox :checked="info.requirement_marital_status_arr.indexOf(item) !== -1 ? true : false" class="checkbox color" style="background: #FFF"/>
              <view>{{ item }}</view>
            </label>
          </view>
        </block>
        <!-- 择偶要求-居住地 -->
        <block v-if="popupType === 'requirement_residence'">
          <view class="top-box">
            <view class="btn" @click="closePopup">取消</view>
            <view class="btn confirm-btn" @click="confirmChoose">确定</view>
          </view>
          <picker-view :immediate-change="true" :indicator-style="indicatorStyle" :value="requirementResidenceChooseValue" @change="bindChange" class="picker-view">
            <picker-view-column>
              <view class="item" v-for="(item,index) in region" :key="index">{{ item.name }}</view>
            </picker-view-column>
            <picker-view-column>
              <view class="item" v-for="(item,index) in region[requirementResidenceChooseValue[0]].city_list" :key="index">{{ item.name }}</view>
            </picker-view-column>
          </picker-view>
        </block>
        <!-- 择偶要求-小孩要求 -->
        <block v-if="popupType === 'requirement_has_children'">
          <view class="top-box">
            <view class="btn" @click="closePopup">取消</view>
            <view class="btn confirm-btn" @click="confirmChoose">确定</view>
          </view>
          <picker-view :immediate-change="true" :indicator-style="indicatorStyle" :value="requirementHasChildrenChooseValue" @change="bindChange" class="picker-view">
            <picker-view-column>
              <view class="item">不限</view>
              <view class="item" v-for="(item,index) in hasChildrenData" :key="index">{{ item }}</view>
            </picker-view-column>
          </picker-view>
        </block>
        <!-- 择偶要求-住房 -->
        <block v-if="popupType === 'requirement_buying_status'">
          <view class="top-box">
            <view class="btn" @click="closePopup">取消</view>
            <view class="btn confirm-btn" @click="confirmChoose">确定</view>
          </view>
          <picker-view :immediate-change="true" :indicator-style="indicatorStyle" :value="requirementHousingStatusChooseValue" @change="bindChange" class="picker-view">
            <picker-view-column>
              <view class="item">不限</view>
              <view class="item" v-for="(item,index) in housingStatusData" :key="index">{{ item }}</view>
            </picker-view-column>
          </picker-view>
        </block>
        <!-- 择偶要求-车辆 -->
        <block v-if="popupType === 'requirement_car_status'">
          <view class="top-box">
            <view class="btn" @click="closePopup">取消</view>
            <view class="btn confirm-btn" @click="confirmChoose">确定</view>
          </view>
          <picker-view :immediate-change="true" :indicator-style="indicatorStyle" :value="requirementCarStatusChooseValue" @change="bindChange" class="picker-view">
            <picker-view-column>
              <view class="item">不限</view>
              <view class="item" v-for="(item,index) in carStatusData" :key="index">{{ item }}</view>
            </picker-view-column>
          </picker-view>
        </block>
      </view>
    </view>
    <!-- 基本信息、详细信息、择偶要求 修改弹框 END -->

  </view>
</template>

<script>
import region from '@/static/json/region.json'

export default {
  data() {
    return {
      indicatorStyle: `height: 50px;`,
      titleMargin: 0,
      touchable: false,
      index: 0,
      // 修改弹框数据 START
      basic_info: {}, // 基本信息
      detail_info: {},// 详细信息
      requirement_info: {},// 择偶要求信息

      popup: false,
      popupType: '', // 控制弹窗类型
      ageData: Array.from({length: 70 - 18 + 1}, (v, i) => i + 18),
      // 居住地数据
      region: region,
      residenceChooseValue: [0, 0],
      requirementResidenceChooseValue: [0, 0],// 要求
      // 身高数据
      heightData: Array.from({length: 200 - 140 + 1}, (v, i) => i + 140),
      heightChooseValue: [0],
      requirementHeightChooseValue: [0, 0],
      // 体重数据
      weightData: Array.from({length: 150 - 40 + 1}, (v, i) => i + 40),
      weightChooseValue: [0],
      // 婚况数据
      maritalStatusData: [],
      maritalStatusChooseValue: [0],
      requirementMaritalStatusChooseValue: [0],// 要求
      // 年收入数据
      annualIncomeData: [],
      annualIncomeChooseValue: [0],
      requirementAnnualIncomeChooseValue: [0],// 要求
      // 车辆数据
      housingStatusData: [],
      housingStatusChooseValue: [0],
      requirementHousingStatusChooseValue: [0],
      // 车辆数据
      carStatusData: [],
      carStatusChooseValue: [0],
      requirementCarStatusChooseValue: [0],
      // 年龄数据
      ageData: Array.from({length: 70 - 18 + 1}, (v, i) => i + 18),
      requirementAgeChooseValue: [0, 0],
      // 小孩数据
      hasChildrenData: [],
      hasChildrenChooseValue: [0],
      requirementHasChildrenChooseValue: [0],
      // 修改弹框数据 END
    };
  },

  created() {
    this.setDynamicMargin(); // 设置动态间距
  },

  onLoad: function () {
    var user_id = uni.getStorageSync('user_id');

    this.$http.post('/index/Api/userInfo', {user_id}).then(res => {
      if (res.data.result === 1) {
        var {
          username, gender, birth_date, birth_year, residence, hukou, height, weight, occupation, body_type,
          marital_status,
          education_level,
          company_type, annual_income, has_children, ethnicity, smoking, drinking, housing_status, car_status,
          requirement_age, requirement_height,
          requirement_body_type, requirement_marital_status, requirement_education_level, requirement_annual_income,
          requirement_residence, requirement_has_children, requirement_buying_status, requirement_car_status,
          requirement_ethnicity, requirement_smoking, requirement_drinking,
          mobile, qq, wechat, occupationData, bodyTypeData, maritalStatusData, educationLevelData,
          companyTypeData, annualIncomeData, housingStatusData, carStatusData, hasChildrenData, ethnicityData,
          drinkingData, smokingData, photos, photos_arr
        } = res.data.data;

        this.info = res.data.data;
        this.basic_info = {
          username, gender, birth_date, birth_year, residence, hukou, height, weight, occupation, body_type
        };
        this.detail_info = {
          marital_status, education_level, company_type, annual_income, has_children, ethnicity, smoking, drinking,
          housing_status, car_status
        };
        this.requirement_info = {
          requirement_age, requirement_height, requirement_body_type, requirement_marital_status,
          requirement_education_level, requirement_annual_income, requirement_residence, requirement_has_children,
          requirement_buying_status, requirement_car_status, requirement_ethnicity, requirement_smoking,
          requirement_drinking
        };
        this.contact_info = {mobile, qq, wechat};

        // 下拉框数据
        // -------------基本信息-------------
        // 居住
        this.residenceChooseValue = [0, 0];
        // 身高
        this.height = this.heightData;
        this.heightChooseValue = [0];
        // 体重
        this.weight = this.weightData;
        this.weightChooseValue = [0];
        // -------------详细信息-------------
        // 婚况
        this.maritalStatusData = maritalStatusData;
        this.maritalStatusChooseValue = marital_status ? [maritalStatusData.indexOf(marital_status)] : [0];
        // 年收入
        this.annualIncomeData = annualIncomeData;
        this.annualIncomeChooseValue = annual_income ? [annualIncomeData.indexOf(annual_income)] : [0];
        // 住房
        this.housingStatusData = housingStatusData;
        this.housingStatusChooseValue = housing_status ? [housingStatusData.indexOf(housing_status)] : [0];
        // 车辆
        this.carStatusData = carStatusData;
        this.carStatusChooseValue = car_status ? [carStatusData.indexOf(car_status)] : [0];
        // -------------择偶要求-------------
        // 年龄要求
        var ageData = this.ageData;
        this.requirementAgeChooseValue = requirement_age ? this.findKey(ageData, requirement_age) : [0, 0];
        // 身高要求
        this.requirementHeightChooseValue = requirement_height ? this.findKey(this.heightData, requirement_height) : [0, 0];
        // 婚况要求
        this.requirementMaritalStatusChooseValue = requirement_marital_status ? [maritalStatusData.indexOf(requirement_marital_status)] : [0];
        // 小孩要求
        this.hasChildrenData = hasChildrenData;
        this.requirementHasChildrenChooseValue = requirement_has_children ? [hasChildrenData.indexOf(requirement_has_children) + 1] : [0];
        // 购房要求
        this.requirementHousingStatusChooseValue = requirement_buying_status ? [housingStatusData.indexOf(requirement_buying_status) + 1] : [0];
        // 购车要求
        this.requirementCarStatusChooseValue = requirement_car_status ? [carStatusData.indexOf(requirement_car_status) + 1] : [0];
      } else {
        this.$common.doErrorResult(res);
      }
    })
  },

  methods: {
    toggleValueInArray(arr, value) {
      const index = arr.indexOf(value); // 查找值在数组中的索引

      if (index !== -1) {
        // 如果存在，删除该值
        arr.splice(index, 1);
      } else {
        // 如果不存在，添加该值
        arr.push(value);
      }

      return arr;
    },

    findKey(data, requirement_data) {
      const [start, end] = requirement_data.split('-');
      const startIndex = data.indexOf(parseInt(start)); // 查找开始年龄下标
      const endIndex = data.indexOf(parseInt(end)); // 查找结束年龄下标
      return [startIndex, endIndex]; // 返回下标
    },

    setDynamicMargin() {
      const windowInfo = uni.getWindowInfo();
      this.titleMargin = windowInfo.statusBarHeight + 10; // 直接使用状态栏高度
    },

    openPopup: function (type) {
      this.popupType = type;
      this.popup = true;
    },

    closePopup: function () {
      this.popupType = '';
      this.popup = false;
    },

    // 性别
    chooseGender: function (gender) {
      console.log(gender)
      this.basic_info.gender = gender;
    },

    // 年份
    changeBirthDate: function (e) {
      var birth_date = e.detail.value,
        birth_year = birth_date.split('-')[0];

      this.basic_info.birth_date = birth_date;
      this.basic_info.birth_year = birth_year + '年';
    },

    changeRequirementMaritalStatus: function (e) {
      var requirement_marital_status_arr = this.info.requirement_marital_status_arr;

      var new_requirement_marital_status_arr = this.toggleValueInArray(requirement_marital_status_arr, e);
      this.info.requirement_marital_status_arr = new_requirement_marital_status_arr;
    },

    confirmRequirementMaritalStatus: function () {
      var requirement_marital_status_arr = this.info.requirement_marital_status_arr,
        requirement_marital_status = requirement_marital_status_arr.join(',');

      this.requirement_info.requirement_marital_status = requirement_marital_status;
      this.closePopup();
    },

    bindChange: function (e) {
      var value = e.detail.value,
        popupType = this.popupType;

      switch (popupType) {
        case 'residence':
          this.residenceChooseValue = value;
          break;
        case 'hukou':
          this.hukouChooseValue = value;
          break;
        case 'height':
          this.heightChooseValue = value;
          break;
        case 'weight':
          this.weightChooseValue = value;
          break;
        case 'occupation':
          this.occupationChooseValue = value;
          break;
        case 'body_type':
          this.bodyTypeChooseValue = value;
          break;
        case 'marital_status':
          this.maritalStatusChooseValue = value;
          break;
        case 'education_level':
          this.educationLevelChooseValue = value;
          break;
        case 'company_type':
          this.companyTypeChooseValue = value;
          break;
        case 'annual_income':
          this.annualIncomeChooseValue = value;
          break;
        case 'ethnicity':
          this.ethnicityChooseValue = value;
          break;
        case 'smoking':
          this.smokingChooseValue = value;
          break;
        case 'drinking':
          this.drinkingChooseValue = value;
          break;
        case 'has_children':
          this.hasChildrenChooseValue = value;
          break;
        case 'housing_status':
          this.housingStatusChooseValue = value;
          break;
        case 'car_status':
          this.carStatusChooseValue = value;
          break;
        case 'requirement_age':
          this.requirementAgeChooseValue = value;
          break;
        case 'requirement_height':
          this.requirementHeightChooseValue = value;
          break;
        case 'requirement_body_type':
          this.requirementBodyTypeChooseValue = value;
          break;
        case 'requirement_marital_status':
          this.requirementMaritalStatusChooseValue = value;
          break;
        case 'requirement_education_level':
          this.requirementEducationLevelChooseValue = value;
          break;
        case 'requirement_annual_income':
          this.requirementAnnualIncomeChooseValue = value;
          break;
        case 'requirement_residence':
          this.requirementResidenceChooseValue = value;
          break;
        case 'requirement_ethnicity':
          this.requirementEthnicityChooseValue = value;
          break;
        case 'requirement_smoking':
          this.requirementSmokingChooseValue = value;
          break;
        case 'requirement_drinking':
          this.requirementDrinkingChooseValue = value;
          break;
        case 'requirement_has_children':
          this.requirementHasChildrenChooseValue = value;
          break;
        case 'requirement_buying_status':
          this.requirementHousingStatusChooseValue = value;
          break;
        case 'requirement_car_status':
          this.requirementCarStatusChooseValue = value;
          break;
      }
    },

    confirmChoose: function () {
      var popupType = this.popupType

      switch (popupType) {
        case 'residence':
          var region = this.region,
            residenceChooseValue = this.residenceChooseValue;
          this.basic_info.residence = region[residenceChooseValue[0]].name + '-' + region[residenceChooseValue[0]].city_list[residenceChooseValue[1]].name;
          break;
        case 'hukou':
          var region = this.region,
            hukouChooseValue = this.hukouChooseValue;
          this.basic_info.hukou = region[hukouChooseValue[0]].name + '-' + region[hukouChooseValue[0]].city_list[hukouChooseValue[1]].name;
          break;
        case 'height':
          this.basic_info.height = this.heightData[this.heightChooseValue];
          break;
        case 'weight':
          this.basic_info.weight = this.weightData[this.weightChooseValue];
          break;
        case 'occupation':
          this.basic_info.occupation = this.occupationData[this.occupationChooseValue];
          break;
        case 'body_type':
          this.basic_info.body_type = this.bodyTypeData[this.bodyTypeChooseValue];
          break;
        case 'marital_status':
          this.detail_info.marital_status = this.maritalStatusData[this.maritalStatusChooseValue];
          break;
        case 'education_level':
          this.detail_info.education_level = this.educationLevelData[this.educationLevelChooseValue];
          break;
        case 'company_type':
          this.detail_info.company_type = this.companyTypeData[this.companyTypeChooseValue];
          break;
        case 'annual_income':
          this.detail_info.annual_income = this.annualIncomeData[this.annualIncomeChooseValue];
          break;
        case 'ethnicity':
          this.detail_info.ethnicity = this.ethnicityData[this.ethnicityChooseValue];
          break;
        case 'smoking':
          this.detail_info.smoking = this.smokingData[this.smokingChooseValue];
          break;
        case 'drinking':
          this.detail_info.drinking = this.drinkingData[this.drinkingChooseValue];
          break;
        case 'has_children':
          this.detail_info.has_children = this.hasChildrenData[this.hasChildrenChooseValue];
          break;
        case 'housing_status':
          this.detail_info.housing_status = this.housingStatusData[this.housingStatusChooseValue];
          break;
        case 'car_status':
          this.detail_info.car_status = this.carStatusData[this.carStatusChooseValue];
          break;
        case 'requirement_age':
          var requirementAgeChooseValue = this.requirementAgeChooseValue.sort((a, b) => a - b);
          this.requirementAgeChooseValue = requirementAgeChooseValue;
          this.requirement_info.requirement_age = this.ageData[requirementAgeChooseValue[0]] + '岁-' + this.ageData[requirementAgeChooseValue[1]] + '岁';
          break;
        case 'requirement_height':
          var requirementHeightChooseValue = this.requirementHeightChooseValue.sort((a, b) => a - b);
          this.requirementHeightChooseValue = requirementHeightChooseValue;
          this.requirement_info.requirement_height = this.heightData[requirementHeightChooseValue[0]] + 'cm-' + this.heightData[requirementHeightChooseValue[1]] + 'cm';
          break;
        case 'requirement_body_type':
          this.requirement_info.requirement_body_type = this.bodyTypeData[this.requirementBodyTypeChooseValue[0] - 1];
          break;
        case 'requirement_marital_status':
          this.requirement_info.requirement_marital_status = this.maritalStatusData[this.requirementMaritalStatusChooseValue];
          break;
        case 'requirement_education_level':
          this.requirement_info.requirement_education_level = this.educationLevelData[this.requirementEducationLevelChooseValue[0] - 1];
          break;
        case 'requirement_annual_income':
          this.requirement_info.requirement_annual_income = this.annualIncomeData[this.requirementAnnualIncomeChooseValue[0] - 1];
          break;
        case 'requirement_residence':
          var region = this.region,
            requirementResidenceChooseValue = this.requirementResidenceChooseValue;
          this.requirement_info.requirement_residence = region[requirementResidenceChooseValue[0]].name + '-' + region[requirementResidenceChooseValue[0]].city_list[requirementResidenceChooseValue[1]].name;
          break;
        case 'requirement_ethnicity':
          this.requirement_info.requirement_ethnicity = this.ethnicityData[this.requirementEthnicityChooseValue[0] - 1];
          break;
        case 'requirement_smoking':
          this.requirement_info.requirement_smoking = this.smokingData[this.requirementSmokingChooseValue[0] - 1];
          break;
        case 'requirement_drinking':
          this.requirement_info.requirement_drinking = this.drinkingData[this.requirementDrinkingChooseValue[0] - 1];
          break;
        case 'requirement_has_children':
          this.requirement_info.requirement_has_children = this.hasChildrenData[this.requirementHasChildrenChooseValue[0] - 1];
          break;
        case 'requirement_buying_status':
          this.requirement_info.requirement_buying_status = this.housingStatusData[this.requirementHousingStatusChooseValue[0] - 1];
          break;
        case 'requirement_car_status':
          this.requirement_info.requirement_car_status = this.carStatusData[this.requirementCarStatusChooseValue[0] - 1];
          break;
      }

      this.closePopup();
    },

    skip: function () {
      var user_id = uni.getStorageSync('user_id');

      this.$http.post('/index/Api/skip', {user_id}).then(res => {
        if (res.data.result == 1) {
          uni.reLaunch({
            url: '/pages/index/index'
          })
        }
      })
    },

    submitStep: function (e) {
      var user_id = uni.getStorageSync('user_id'),
        formData = e.detail.value;

      formData.user_id = user_id;

      uni.showLoading({
        title: '提交中',
        mask: true
      })

      this.$http.post('/index/Api/saveUserDetailsStep', formData).then(res => {
        uni.hideLoading();

        if (res.data.result == 1) {
          var step = formData.step;
          if (step < 4) {
            this.index = formData.step;
          } else {
            uni.reLaunch({
              url: '/pages/index/index'
            })
          }
        } else {
          this.$common.doErrorResult(res);
        }
      })

    },

  },

}
</script>

<style lang="scss">
.app-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 40rpx;
  height: 100vh;

  .title {
    font-size: 36rpx;
    text-align: center;
  }

  .main-box {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .swiper {
    width: calc(100% - 40rpx);
    min-height: 46vh;
    border-radius: 20rpx; /* 设置圆角 */
    overflow: hidden; /* 确保子元素超出部分被隐藏 */

    .step-box {
      height: 100%;
      background: #fff;
      display: flex;
      flex-direction: column;
      padding: 0 20rpx;
      justify-content: space-between;

      .step-title {
        font-size: 40rpx;
        color: $main-color;
        height: 100rpx;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .row-box {
        margin-bottom: 30rpx;

        .row {
          display: flex;
          width: 100%;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 30rpx;
          font-size: 32rpx;
          flex: 1;

          &:last-child {
            margin-bottom: 0;
          }

          .input {
            margin-left: 100rpx;
            padding: 10rpx 20rpx;
            border: 2rpx solid #dad6d6;
            border-radius: 20rpx;
            flex: 1;
          }

          .sex-box {
            flex: 1;
            margin-left: 100rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .sex {
              flex: 1;
              padding: 10rpx 0;
              border: 2rpx solid #dad6d6;
              border-radius: 20rpx;
              margin-right: 20rpx;
              text-align: center;

              &:last-child {
                margin-right: 0;
              }
            }

            .active {
              border: 2rpx solid #F30E0E;
            }

          }

          .res-box {
            display: flex;
            align-items: center;

            .res {
              flex: 1;
              margin-right: 20rpx;
              text-align: right;
            }

            .icon {
              width: 20rpx;
              height: 28rpx;
            }
          }
        }
      }

      .btn-box {
        height: 160rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20rpx;

        button[type=default] {
          background-color: red;
          padding: 0;
        }

        .next-btn {
          border: 2rpx solid $main-color;
          color: $main-color;
          font-size: 36rpx;
          padding: 0 90rpx;
          border-radius: 50rpx;

          label {
            font-size: 24rpx;
            color: $main-blank;
            margin-left: 10rpx;
          }
        }

        .skip {
          font-size: 28rpx;
          margin-top: 20rpx;
        }
      }
    }
  }

  .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;

    .modal {
      width: 100%;

      .modal-content {
        background: #fff;
        width: calc(100% - 40rpx);
        border-radius: 20rpx;
        height: 75vh;
        position: absolute;
        bottom: 0;
        padding: 40rpx 20rpx 100rpx 20rpx;
        overflow-y: scroll;

        .close {
          position: absolute;
          right: 20rpx;
          top: 40rpx;
          font-size: 32rpx;
          color: $main-color;
        }

        .modal-title {
          font-size: 32rpx;
          color: $main-color;
          margin-bottom: 20rpx;
        }

        .row-box {
          margin-bottom: 30rpx;

          .row {
            display: flex;
            width: 100%;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30rpx;
            font-size: 32rpx;

            &:last-child {
              margin-bottom: 0;
            }

            .input {
              margin-left: 100rpx;
              padding: 10rpx 20rpx;
              border: 2rpx solid #dad6d6;
              border-radius: 20rpx;
            }

            .sex-box {
              flex: 1;
              margin-left: 100rpx;
              display: flex;
              justify-content: space-between;
              align-items: center;

              .sex {
                flex: 1;
                padding: 10rpx 0;
                border: 2rpx solid #dad6d6;
                border-radius: 20rpx;
                margin-right: 20rpx;
                text-align: center;

                &:last-child {
                  margin-right: 0;
                }
              }

              .active {
                border: 2rpx solid #F30E0E;
              }

            }

            .res-box {
              display: flex;
              align-items: center;

              .res {
                flex: 1;
                margin-right: 20rpx;
                text-align: right;
              }

              .icon {
                width: 20rpx;
                height: 28rpx;
              }
            }
          }
        }

        .photos-box {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          width: 100%;
          margin-top: 130rpx;
          max-height: calc(70vh - 130rpx);

          .show-box {
            position: relative;
            width: 48%;
            margin-bottom: 10rpx;

            &:nth-last-child(1),
            &:nth-last-child(2) {
              margin-bottom: 0;
            }

            .del {
              position: absolute;
              width: 40rpx;
              height: 40rpx;
              border-radius: 50%;
              right: 0;
              top: 0;
            }

            .photo {
              width: 100%;
              height: 260rpx;
            }
          }
        }

      }

      .bottom-view {
        position: fixed;
        bottom: 0;
        right: 0;
        left: 0;
        background: #fff;
        height: 120rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 20rpx;

        .upload-btn {
          color: #922A27;
          border: 2rpx solid #922A27;
          padding: 16rpx 0;
          text-align: center;
          border-radius: 40rpx;
          font-size: 32rpx;
          flex: 1;
          margin-bottom: 30rpx;
          margin-right: 20rpx;
        }
      }

      .save-btn {
        color: #fff;
        padding: 16rpx 0;
        text-align: center;
        border-radius: 40rpx;
        font-size: 32rpx;
        flex: 1;
        margin-bottom: 30rpx;
        background: $main-color;
      }

      .btn-box {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

    }
  }

  // 年龄范围
  .popup-overlay {
    position: fixed;
    width: 100vw;
    right: 0;
    bottom: -100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: flex-end;
    z-index: 30;
    transition: bottom 0.3s ease; // 动画效果

    &.show {
      bottom: 0;
      top: 0;
    }

    .popup-content {
      background: white;
      padding: 20px;
      width: 100%;

      .top-box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 32rpx;

        .confirm-btn {
          color: $main-color;
        }
      }

      .picker-view {
        width: 100%;
        height: 600rpx;
        margin-top: 20rpx;
      }

      .item {
        line-height: 100rpx;
        text-align: center;
      }
    }
  }

  .checkbox-box {
    padding: 100rpx 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .checkbox-label {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 30rpx;
    }
  }
}


</style>

